import React, { Component } from 'react'
import './calendar.css'
export default class Form extends Component {
    constructor(props) {
        super(props)
        this.state = {
            year: [2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012],
            month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            day: ['一', '二', '三', '四', '五', '六', '日'],
            selectYear: new Date().getFullYear(),
            selectMonth: new Date().getMonth() + 1,
            arr: []
        }
    }

    change = (data, select) => {
        if (data == 'year') {
            this.setState({ selectYear: select, arr: [] })
        }
        else {
            this.setState({ selectMonth: select, arr: [] })
        }
    }

    chose(e) {
        console.log(e)
    }
    /*
 * 获取上一个月
 */
    getPreMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var day = arr[2]; //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中月的天数
        var year2 = year;
        var month2 = parseInt(month) - 1;
        if (month2 == 0) {
            year2 = parseInt(year2) - 1;
            month2 = 12;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }

    /*
     * 获取下一个月
     */
    getNextMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var day = arr[2]; //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中的月的天数
        var year2 = year;
        var month2 = parseInt(month) + 1;
        if (month2 == 13) {
            year2 = parseInt(year2) + 1;
            month2 = 1;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }

        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }
    render() {
        var count = 1;
        console.log('2021-0', new Date(2021, 0).getTime())
        var date1 = new Date(new Date(this.state.selectYear, this.state.selectMonth - 1).setDate(0)).getDate()  // 上一个月份天数
        var date = new Date(this.state.selectYear, this.state.selectMonth - 1).getDay() == 0 ? 6 : new Date(this.state.selectYear, this.state.selectMonth - 1).getDay() - 1 // 上个月取几天
        var today = new Date(this.state.selectYear, this.state.selectMonth, 0).getDate() // 某个月有多少天
        for (var i = date1, j = 0; j < date; i-- , j++) { // 上个月取的天数
            this.state.arr.unshift(i)
        }
        for (var i = 1; i <= today; i++) {  // 本月天数
            this.state.arr.push(i)
        }
        for (var i = this.state.arr.length, j = 1; i < 42; j++ , i++) { //下个月取的天数
            this.state.arr.push(j)
        }
        return (<div className="calendar">
            <Select name='year' date={this.state.year} fn={this.change}></Select>
            <Select name="month" date={this.state.month} fn={this.change}></Select>
            <div className="monthes">
                {this.state.day.map((item, index) => {
                    return (<li key={index}>{item}</li>)
                })}

                {this.state.arr.map((item, index) => {
                    console.log('this.state.year', this.state.selectYear)
                    console.log('this.state.month', this.state.selectMonth)
                    return (<li key={index}
                        className={item == new Date().getDate() && ((count++) == 1) ? 'show' : ''}
                        onClick={this.chose.bind(this)}
                    >{item}</li>)
                })}
            </div>
        </div>)
    }
}

class Select extends Component { // 选择框
    constructor(props) {
        super(props)
        this.state = {
            select: false,
            date: this.props.date,
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1
        }
    }
    selectHandler = () => {
        this.setState({ select: !this.state.select })
    }
    change = (e) => {
        if (this.props.name == 'year') {
            this.props.fn('year', e)
            this.setState({ year: e })
        } else {
            this.props.fn('month', e)
            this.setState({ month: e })
        }
    }
    render() {
        return (<div className={'select' + ' ' + this.props.name} onClick={this.selectHandler}>
            <span className="date">{this.props.name == 'year' ? this.state.year : this.state.month}</span>
            <span className={this.state.select ? 'top' : 'under'}>></span>

            {this.state.select &&
                <div className="list">
                    {this.state.date.map((item, index) => {
                        return (<li key={index} onClick={this.change.bind(this, item)}>{item}</li>)
                    })}

                </div>}
        </div>)
    }
}

